<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="./js/data.js"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app"></div>
  <template id="root">
    <div id="shopcart" class="shop-cart">
      <div class="tabs">
        <div class="border">
          <!-- data-*表示自定义属性。 -->
          <div class="title active" data-index="0">
            全部商品
            <span class="count">3</span>
          </div>
          <div class="title" data-index="1">
            降价商品
            <span class="count">0</span>
          </div>
          <div class="title last" data-index="2">
            库存紧张
            <span class="count">0</span>
          </div>
          <div class="line"></div>
        </div>
      </div>

      <div class="lists">
        <div class="header">
          <ul class="clearfix">
            <li>
              <input type="checkbox" class="select-all" v-model="checkAll" @change="modifyCheckAll">
              <label>全选</label>
            </li>
            <li class="product-info">商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>金额</li>
            <li>操作</li>
          </ul>
        </div>

        <div id="shoplist" class="shoplist">
          <!-- 店铺内容及样式参考 -->

          <div class="shop" v-for="s in shopcarts" :class="">
            <div class="shop-info">
              <input type="checkbox" v-model="s.isChecked" @change="modifyShop(s)">
              <span class="shop-tip">店铺：</span>
              <a class="shop-name" href="#">{{s.shopName}}</a>
              <a href="#" class="wangwang">旺旺</a>
            </div>
            <div class="products">
              <div class="item" v-for="p in s.products">
                <div class="select-logo">
                  <input type="checkbox" v-model="p.isChecked" @change="modifyProduct(s)">
                  <img :src="p.topImg" alt="产品logo">
                </div>
                <div class="product-detail">
                  <div class="left">
                    <a href="#" class="product-name">
                      {{p.productName}}
                    </a>
                    <div class="logos">
                      <a href="#" class="card">信用卡</a>
                      <a href="#" class="service">保障服务</a>
                      <a href="#" class="order">订单险</a>
                      <a href="#" class="seven">7天无理由</a>
                    </div>
                  </div>
                  <div class="right" v-html="p.spec">
                  </div>
                </div>
                <div class="price">
                  <p class="market-price">￥{{p.marketPrice}}</p>
                  <p class="real-price">￥{{p.price}}</p>
                </div>
                <div class="count">
                  <span class="sub" @click="decrement(p)">-</span>
                  <span class="input"><input type="text" v-model="p.count"></span>
                  <span class="add" @click="increment(p)">+</span>
                </div>
                <div class="amount">￥{{p.count*p.price}}</div>
                <div class="delete">
                  <a href="#" @click="removeProduct(s,p)">删除</a>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="operate">
        <div class="left">
          <input type="checkbox" class="select-all-footer">
          <a href="javascript:void(0);">删除</a>
        </div>

        <div class="right">
          <div>已选择商品<span class="selected-count">0</span>件</div>
          <div class="amount">合计（不含运费）： <span class="sum">￥{{totalPrice}}</span></div>
          <a href="javascript:void(0);" class="settle">结算</a>
        </div>
      </div>
    </div>
  </template>
  <script>

  </script>
  <script>

    const app = Vue.createApp({
      template: "#root",
      data() {
        return {
          shopcarts,
          checkAll: false
        }
      },
      mounted() {
        var titles = document.querySelectorAll('.title')
        var line = document.querySelector('.line')
        for (let i = 0; i < titles.length; i++) {
          titles[i].addEventListener('mouseenter', function () {
            for (var j = 0; j < titles.length; j++) {
              titles[j].classList.remove('active')
            }
            this.classList.add('active')
            line.style.left = i * line.offsetWidth + 'px'
          })
        }
      },
      computed: {
        totalPrice() {
          let sum = 0
          this.shopcarts.forEach((s) => {
            s.products.forEach((p) => {
              if (p.isChecked) {
                sum += p.count * p.price
              }
            })
          })
          return sum
        }
      },
      methods: {
        increment(p) {
          p.count++
        },
        decrement(p) {
          if (p.count > 0) {
            p.count--
          }
        },
        removeProduct(s, p) {
          s.products.splice(s.products.indexOf(p), 1)
          if (s.products.length == 0) {
            this.shopcarts.splice(this.shopcarts.indexOf(s), 1)
          }
        },
        modifyShop(s) {
          // console.log(s.isChecked);
          s.products.forEach(p => {
            p.isChecked = s.isChecked
          });
        },
        modifyCheckAll() {
          this.shopcarts.forEach((s) => {
            s.isChecked = this.checkAll
            s.products.forEach((p) => {
              p.isChecked = this.checkAll
            })
          })
        },
        modifyProduct(s) {
          s.isChecked = s.products.length == s.products.filter((p) => { return p.isChecked == true }).length
        }
      }

    })
    app.mount("#app")
  </script>
</body>

</html>